<!DOCTYPE html>
<html>
	<head>
		<!-- 设置浏览器不缓存 -->
		<META HTTP-EQUIV="pragma" CONTENT="no-cache">
		<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
		<META HTTP-EQUIV="expires" CONTENT="0">
		<!-- Content-Type -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<!-- Favicon -->
		<link rel="shortcut icon" href="./images/logo.png">
		<title>企业服务共享中心</title>
		<!--stylesheets-->
		<link rel="stylesheet" href="./plugins/element/index.css">
		<script src="./plugins/vue/vue.js"></script>
		<script src="./plugins/vue/clipboard.js"></script>
		<script src="./plugins/element/index.js"></script>
		<script src="./plugins/axios/axios.min.js"></script>
		<script src="./js/common/public.js?v=0.8.0.3"></script>
		<!-- 自定义样式表 -->
		<link rel="stylesheet" href="./css/base.css?v=0.8.0.3">
	</head>
	<style type="text/css">
		.el-range-editor.el-input__inner {
			width: 200px;
		}

		.el-range-editor .el-range-input {
			width: 80px;
		}

		.el-form-item__healthstyle .el-form-item__label {
			width: 50%;
		}

		.el-form-item__workexperiencestyle .el-form-item__label {
			width: 50%;
		}

		.el-form-item__family .el-form-item__label {
			width: 50%;
		}

		.el-form-item__baseinfo .el-form-item__label {
			width: 50%;
		}

		.el-table .success-row {
			background: #f0f9eb;
		}
	</style>
	<body>
		<div id="app">
			<template>
				<el-container class="maincontainer">
					<el-container class="submaincontainer">
						<el-card class="box-card" style="position:relative;width:330px" shadow="never" v-show="leftbar_show">
							<div style="position:absolute;left:0;top:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding-left: 20px;padding-top: 20px;padding-right: 20px;">
								<el-form :model="queryForm" ref="queryForm">

									<el-form-item label="类型" prop="type">
										<el-select v-model="queryForm.type" placeholder="请选择" clearable filterable allow-create default-first-option @change="changeType($event)">
											<el-option v-for="item in typeoptions" :key="item" :label="item" :value="item">
											</el-option>
										</el-select>
									</el-form-item>

									<el-form-item label="小类型" prop="stype">
										<el-select v-model="queryForm.stype" multiple placeholder="请选择" clearable filterable allow-create
										 default-first-option>
											<el-option v-for="item in stypeoptions" :key="item" :label="item" :value="item">
											</el-option>
										</el-select>
									</el-form-item>


									<el-form-item label="题型" prop="question_type">
										<el-select v-model="queryForm.questionType" placeholder="请选择" clearable>
											<el-option v-for="item in questionTypeoptions" :key="item.value" :label="item.label" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>

									<el-form-item label="题目" prop="tiMu">
										<el-input v-model="queryForm.tiMu" maxlength="400"></el-input>
									</el-form-item>

									<el-form-item label="添加时间" prop="addTime">
										<el-date-picker v-model="queryForm.addTime" type="datetimerange" value-format="yyyy-MM-dd" :picker-options="pickerOptions"
										 range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left">
										</el-date-picker>
									</el-form-item>

									<el-form-item label="更新时间" prop="updateTime">
										<el-date-picker v-model="queryForm.updateTime" type="datetimerange" value-format="yyyy-MM-dd" :picker-options="pickerOptions"
										 range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left">
										</el-date-picker>
									</el-form-item>

									<el-form-item>
										<el-button size="small" type="primary" @click.native.prevent="start" style="position:fixed;left:20px;bottom:5px;">查询</el-button>
									</el-form-item>
								</el-form>
							</div>
						</el-card>



		</div>
		<el-card class="box-card" style="width:100%" shadow="never">
			<div slot="header" class="clearfix">
				<i v-on:click="showLeftBar()" v-bind:class="[leftbar_show ? 'el-icon-s-fold' : 'el-icon-s-unfold']" style="color:#409EFF;cursor:pointer;"></i>
				<span>题库列表</span>
				<el-button-group style="float: right;margin-top:0px;">
					<el-button size="small" icon="el-icon-document-add" type="primary" @click="toolAction('添加')">添加</el-button>

				</el-button-group>
			</div>
			<div>
				<el-table ref="multipleTable" @select='selectionChange' :data="pagedata" tooltip-effect="dark" :height="tableHeight"
				 border highlight-current-row style="width: 100%;" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
					<el-table-column type="index" min-width="55">
					</el-table-column>
					<!-- 					<el-table-column prop="xuanXiang" label="选项" min-width="600" show-overflow-tooltip>
						<template slot-scope="scope">
							<el-tag v-for="item,index in scope.row.xuanXiang">
								{{item}}
							</el-tag>
						</template>
					</el-table-column> -->
					<el-table-column v-for="column in tablecolums" v-bind:prop="column.prop" v-bind:label="column.label"
					 v-bind:min-width="column.width" show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="操作" min-width="80">
						<template slot-scope="scope">
							<el-link type="primary" @click="edit(scope.$index, scope.row)">编辑</el-link>
						</template>
					</el-table-column>

				</el-table>


				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentPageChange" :current-page="queryForm.pageNo"
				 :page-sizes="queryForm.pagesizes" :page-size="queryForm.pagesize" background layout="total,sizes, prev, pager, next"
				 :total="pagetotal">
				</el-pagination>
			</div>
			</div>
		</el-card>
		</el-container>
		</el-container>
		<el-dialog :close-on-click-modal="false" title="题目信息" :visible.sync="dialogFormVisible" width="950px">
			<el-form :model="questionbankForm" ref="questionbankForm" label-width="100px" :rules="saverules">

				<el-row :gutter="20">
					<el-col :span="16">
						<el-form-item label="类型" prop="type">
							<el-select v-model="questionbankForm.type" placeholder="请选择" clearable filterable allow-create
							 default-first-option @change="changeType($event)">
								<el-option v-for="item in typeoptions" :key="item" :label="item" :value="item">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="16">
						<el-form-item label="小类型" prop="stype">
							<el-select v-model="questionbankForm.stype" placeholder="请选择" clearable filterable allow-create
							 default-first-option>
								<el-option v-for="item in stypeoptions" :key="item" :label="item" :value="item">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>

				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="题型" prop="questionType">
							<el-select v-model="questionbankForm.questionType" placeholder="请选择" clearable @change="">
								<el-option v-for="item in questionTypeoptions" :key="item.key" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="20">
						<el-form-item label="题目" prop="tiMu">
							<el-input  show-word-limit type="textarea" :rows="3" placeholder="请输入内容"
							 v-model="questionbankForm.tiMu">
							</el-input>

						</el-form-item>
					</el-col>
				</el-row>

				<el-form-item label="选项" prop="xuanXiang" v-if="questionbankForm.questionType!='简答'">
					<!-- 渲染问题列表 -->
					<section v-for="(item,index) in questionbankForm.xuanXiang" :key="index">
						<section v-if="index === 0">
							<el-row :gutter="20">
								<el-col :span="4">
									<el-input style="margin-left: -10px;" v-model="item.label" placeholder="选项" clearable @keyup.enter.native="addlastitems(index, '1')" />
								</el-col>
								<el-col :span="14">
									<el-input style="margin-left: -10px;" v-model="item.text" placeholder="请输入选项" clearable show-word-limit
									 @keyup.enter.native="addlastitems(index, '1')" :rows="2" type="textarea" />
								</el-col>
								<el-col :span="4">
									<el-button type="primary" icon="el-icon-plus" plain circle @click="addlastitems(index, '1')" />
								</el-col>
							</el-row>
						</section>
						<section v-if="index > 0">

							<el-row :gutter="20">
								<el-col :span="4">
									<el-input v-model="item.label" placeholder="请输入选项" clearable @keyup.enter.native="addlastitems(index, '1')" />
								</el-col>
								<el-col :span="14">
									<el-input v-model="item.text" placeholder="请输入选项" clearable show-word-limit @keyup.enter.native="addlastitems(index, '1')"
									 :rows="2" type="textarea" />
								</el-col>
								<el-col :span="4">
									<el-button type="danger" icon="el-icon-delete" plain style="margin-left:10px;" circle @click="rmlastitems(index, '1')" />
								</el-col>
							</el-row>
						</section>
					</section>
				</el-form-item>
				<el-row :gutter="20">
					<el-col :span="12">
						<!-- 渲染问题列表 -->
						<el-form-item v-for="(item, index) in questionbankForm.rightchoose" :label="'正确答案'" :key="index">
							<el-select v-model="item.value" placeholder="请选择" clearable>
								<el-option v-for="i in questionbankForm.xuanXiang" :key="i.label" :label="i.label" :value="i.label">
								</el-option>
							</el-select>
							<el-button @click.prevent="removeitem(item)" v-if="questionbankForm.questionType==='多选'">删除</el-button>
						</el-form-item>

					</el-col>
					<el-button @click="additem" v-if="questionbankForm.questionType==='多选'">新增选项</el-button>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="confirm" :disabled="submitDisable">确 定</el-button>
			</div>
		</el-dialog>



		</template>
		</div>
	</body>

	<script src="./js/myquestionbank.js"></script>

	</script>
</html>
